<template>
  <div class="connect">
    <header>
      <p><span>退换原因设置</span></p>
      <button class="btnNews">刷新</button>
    </header>
    <!-- 退款详情表 -->
    <section class="sectionTab">
      <div class="tabContent">
        <div class="tabTitle">
          <span>数据列表</span>
          <ul>
            <li>
              <el-button @click="delLargeNum" type="danger">批量删除</el-button>
            </li>
            <li>
              <el-button plain @click="updata">添加</el-button>
            </li>
          </ul>
        </div>
        <el-table :data="tableData" @selection-change="handleSelectionChange" border style="width: 100% ">
          <el-table-column type="selection" width="100"> </el-table-column>
          <el-table-column type="index" :index="indexMothod" label="序号" width="100">
            <template slot-scope="scope">
              {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
            </template>
          </el-table-column>
          <el-table-column prop="cause" label="原因描述" width="200">
          </el-table-column>
          <el-table-column prop="ordering" label="排序" width="240">
          </el-table-column>

          <el-table-column label="是否启用" pops="initiated" width="160">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.initiated" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                :inactive-value="0" @change="changeSwitch(scope.row.cause,
                  scope.row.ordering,
                  scope.row.initiated,
                  scope.row.orderreturnsId)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createdate" label="添加时间" width="240">
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="240">
            <template slot-scope="scope">
              <el-button type="text" @click="
                editListById(
                  scope.row.cause,
                  scope.row.ordering,
                  scope.row.initiated,
                  scope.row.orderreturnsId
                )
              ">编辑</el-button>
              <el-button type="text" @click="delListById(scope.row.orderreturnsId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :total="count" background
        layout="prev, pager, next">
      </el-pagination>
    </section>
    <!-- 弹出框 -->
    <el-dialog title="添加退换原因" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="原因描述：" :label-width="formLabelWidth">
          <el-input v-model="form.cause" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序：" :label-width="formLabelWidth">
          <el-input v-model="form.serialNumber" autocomplete="off"></el-input>
          <el-input v-model="form.ycid" autocomplete="off" type="hidden"></el-input>
        </el-form-item>
        <el-form-item label="是否开启" :label-width="formLabelWidth">
          <template>
            <el-switch v-model="switchValue" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
              :inactive-value="0">
              <!-- @change="changeSwitch($event,scope.row,scope.$index)" -->
            </el-switch>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickAddCauseLise">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "OrderRefund",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      indexMothod: "",
      initiated: 0,
      addTCKState: undefined,
      count: 0,
      tableData: [],
      ordering: 0,
      value: "",
      yuanYin: "",
      dialogFormVisible: false,
      multipleSelection: "",
      activeNames: ["1"],
      formInline: {
        user: "",
        region: "",
      },
      switchValue: 1,
      form: {
        cause: "",
        name: "",
        ycid: 0,
        region: "",
        date1: "",
        serialNumber: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getList()
  },
  methods: {
    ...mapActions("order", [
      "getOrderReturns",
      "deleteByIds",
      "addCauseList",
      "updataBUId",
    ]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //分页变化时重新加载页面
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log("fenye", val);
      this.getList()
    },
    //获取被选中的框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //批量删除已选项
    delLargeNum() {
      this.$confirm("此操作将永久删除所选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let array = this.multipleSelection.map((item) => {
          return item.orderreturnsId;
        });
        //  let arr = Object.values(ids);
        //  console.log("stringify",arr);
        // let ids=JSON.stringify(...array)
        this.deleteByIds(array).then((data) => {
          this.getList()
        });
      });
    },
    //点击添加退换原因设置
    updata() {
      this.dialogFormVisible = true;
      this.addTCKState = true;
      this.form.cause = "";
      this.form.serialNumber = "";
      this.switchValue = 0;
    },
    //根据id删除conse.log
    delListById(id) {
      let array = [id];
      this.deleteByIds(array).then((data) => {
        this.getList()

      });
    },
    //编辑
    editListById(cause, ordering, initiated, orderreturnsId) {
      this.dialogFormVisible = true;
      this.addTCKState = false;
      this.form.cause = cause;
      this.form.ycid = orderreturnsId;
      this.form.serialNumber = ordering;
      this.switchValue = initiated;
      clickAddCauseLise(cause, ordering, initiated, orderreturnsId);
    },
    //点击开关改变
    changeSwitch(cause, ordering, initiated, orderreturnsId) {
      // console.log("initiated",initiated);
      this.updataBUId({ orderreturnsId, cause, ordering, initiated }).then(
        (data) => {
          this.getList()
        }
      );
    },
    //点击弹出框确定按钮
    clickAddCauseLise() {
      this.dialogFormVisible = false;
      if (this.addTCKState) {
        console.log("我认为是添加", this.undefined);
        let orderreturnsId;
        let cause = this.form.cause;
        let ordering = Number(this.form.serialNumber);
        let initiated = this.switchValue;
        console.log("九九", initiated);
        console.log(typeof initiated);
        this.addCauseList({ orderreturnsId, cause, ordering, initiated }).then(
          (data) => {
            this.getList()
          }
        );
      } else {
        console.log("修改：");
        let orderreturnsId = this.form.ycid;
        console.log("修改：", orderreturnsId);
        let cause = this.form.cause;
        let ordering = this.form.serialNumber;
        let initiated = this.switchValue;
        this.updataBUId({ orderreturnsId, cause, ordering, initiated }).then(
          (data) => {
            this.getList()
          }
        );
      }
    },
    getList() {
      let pageSize = this.pageSize;
      let currentPage = this.currentPage;
      this.getOrderReturns({ currentPage, pageSize }).then((data) => {
        console.log("cause", data.count);
        this.count = Number(data.count);
        this.tableData = data.data;
      });
    }
  },
};
</script>
<style scoped>
/* * {
  margin: 0;
  padding: 0;
} */
ul li {
  list-style: none;
  margin-right: 16px;
  margin-left: 20px;
}

.tabTitle .el-button--danger {
  margin-right: 20px;
}

header {
  height: 50px;
  position: relative;
  line-height: 50px;
  background-color: #f2f2f2;
  padding-left: 2.5%;
  margin-bottom: 30px;
}

header p {
  position: absolute;
  font-size: 18px;
  font-weight: 400;
}

header span {
  border-left: 6px solid #1cb09a;
  padding-left: 20px;
}

header .btnNews {
  position: absolute;
  top: 6px;
  right: 2.5%;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #1cb09a;
  color: #fff;
  border: none;
}

section {
  margin-top: 30px;
  width: 95%;
  margin: 0 auto;
}

.connect section:nth-child(1) div:first-child {
  margin-bottom: 30px;
}

header .el-button {
  margin-left: 30px;
  display: inline-block;
  /* height: 40px;
  width: 80px; */
  background-color: #1cb09a;
  padding: 8px 12px;
}

.sectionTab {
  background-color: #f2f2f2;
  margin-top: 40px;
}

.tabContent {
  margin-left: px;
}

.tabTitle {
  position: relative;
  height: 50px;
  line-height: 50px;
  background-color: #f2f2f2;
  padding-left: 16px;
}

.tabTitle ul {
  overflow: hidden;
  position: absolute;
  right: 16px;
  top: 0;
}

.tabTitle ul li {
  float: left;
  text-decoration: none;
}

.el-pagination {
  padding: 14px 5px;
  text-align: center;
  margin-bottom: 20px;
}



::v-deep .tabTitle .el-input__inner {
  display: inline-block;
  width: 100px;
  height: 30px;
}

::v-deep .el-table .el-table__cell {
  text-align: center;
}
</style>
  